<template>
  <div class="list" ref="listWrapper">
    <!-- 为什么这里还要加一个better-scroll的容器?, 因为better-scroll只对外部盒子下的第一个子元素生效, 所以要包一层 -->
    <div class="better-scroll-container">
      <div class="hot-cities">
        <div class="hot-cities-title">热门城市</div>
        <ul class="clearfix" ref="cityList">
          <!-- 边框可以通过动态绑定来获取 -->
          <li 
            v-for="item of computedCities" 
            :key="item.name" 
            :class="item.borderType"
            @click="handleCityClick(item.name)"
          >
            <!-- 如何用nextTick去优化这个监听启动BScroll -->
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="alphabet-menu">
        <div class="alphabet-menu-title">字母排序</div>
        <ul class="clearfix">
          <li v-for="(item, index) of letters" :key="index"  @click="handleLetterClick">
            {{item}}
          </li>
        </ul>
      </div>
      <!-- 对象的-v-for有3个参数 -->
      <!-- 城市名字按字母排序 -->
      <div class="alphabet-list" v-for="(item, key) of cities" :key="key" :ref="key">
        <div class="alphabet-list-title">{{key}}</div>
        <ul class="clearfix">
          <li v-for="innerItem of item" :key="innerItem.id" @click="handleCityClick(innerItem.name)" >
            {{innerItem.name}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// import BScroll from 'better-scroll'
// 这个写法是2版本的写法, 而且占用的内存也小, 虽然上面的也能用,但是上面的占100多K(未压缩前的), 下面的才30几K
import BScroll from '@better-scroll/core'
import { mapMutations, mapGetters } from 'vuex'
// this.scroll.scrollToElement(DOM元素)
// 组件很长而且"组件组"只有一个这种组件,那么用BScroll没问题, 如果有多个组件共同组成很长的页面,
// BScroll就不好用了, 还是用原生的滚动把

export default {
  name: 'CityList',
  props: {
    hotCities: Array,
    cities: Object
  },
  computed: {
    letters: function() {
      var letters = [];
      for(var i in this.cities) {
        letters.push(i);
      }
      return letters;
    },
    computedCities: function() {
      var result = [],
          len = this.hotCities.length,
          item;
      for (var i = 0; i < len; i++) {
        var resObj = {};
        item = this.hotCities[i];
        resObj.name = item.name;
        resObj.id = item.id;
        if (item.order === len && len % 3 === 0) {
          resObj.borderType = '';
          // 这里其实 ؟len-1, len-2用的不完美, 因为热门城市已经固定12个,如果不固定的话,不能这么用
          // len - 倒数第1个 = 0, 减倒数第二个=1, 倒数第三个=2, 所以是 <=2
          // ul是根据li创建的(而不是固定高度), 所以最后一排的li肯定是没有bottom的 ,不用担心
        } else if (len - item.order <= 2) {
          resObj.borderType = 'border-right';
        } else if (item.order % 3 === 0){
          resObj.borderType = 'border-bottom'
        } else {
          resObj.borderType = 'border-rightbottom'
        }
        result.push(resObj);
      } 
      return result;
    }
  },
  watch: {
    computedCities: function() {
      // computedCities
      console.log('完成');
      // 不管用啊....
      // this.initBScroll();
    }
  },
  // 
  methods: {
    // 切换路由后,better-scroll失效了
    initBScroll: function() {
      var oHeader = document.querySelector('.header');
      oHeader.addEventListener('click', this.headerToTop);
      this.scroll = new BScroll(this.$refs.listWrapper);
      // window.removeEventListener('load', this.initBScroll);
    },
    handleCityClick: function(city) {
      // this.$store.dispatch('changeCityName', city);
      // this.$store.commit('changeCityName', city);
      // 有了...mapMutations后, 上面的就不要了
      this.changeCityName(city);
      // 这个方法能跳转到对应的路由里面去
      // this.$router.push({
      //   name: 'Home'
      // });
      // 这种写法也可以的, 不过这么写不好扩展
      this.$router.push('/');
      
      
    },
    ...mapMutations({
      changeCityName: 'changeCityName'  //map this.cahngeName() to this.$store.commit('changeCityName)
    }),
    handleLetterClick: function(event) {
      if (!this.scroll) {
        return;
      }
      var e = event || window.event,
          tar = e.target || e.srcElement,
          letter = tar.innerText,
          element;

      // this.letter = letter;
      element = this.$refs[letter][0];
      // 刚刚开始better-scroll插件还没启动就执行会报错
      // console.log(element );
      this.scroll.scrollToElement(element);
      // this.scroll.
    },
    headerToTop: function() {
      // 因为有better-scroll, 所以不行, 如何跨组件传值?, 不用, 因为其实频屏幕高度已经固定了, 就算用scroll也没有用
      // 所以只能在better-scrol插件里面做, lsitTop就是这个better-scroll的最顶层
      // scrollTo(0, 0);
      var bScroll = this.scroll;
       bScroll && bScroll.scrollToElement(this.$refs.listWrapper, {
         click: true
       });
    }
    
  },
  mounted: function() {
    // var _self = this;
    // 用onLoad好, DOMContentLoaded不好, 因为这个是动态加载的, 所以js没加载前scroll拿不到高度
    // 除非设定固定高度, 但是数据 是服务端拿的, 所以不能强行设置高度, 除非服务端传过来一个高度
    // 用服务端加载比较好感觉, 现在还不会
    // 问题: ********切换路由时, 然后再切换回来'better-scroll就不生效了******
    // 用了window.addEvnentListener切换路由的时候就不行了,  坑.......调试了好久
    // window.loload是页面打开的时候, 对于切换路由没用的
    // window.addEventListener('load', this.initBScroll);
    // if (!this.timer) {
      setTimeout(() => {
        this.initBScroll();
      }, 300);

    
    // this.scroll = new BScroll(this.$refs.listWrapper);
  },
  beforeDestroy: function() {
    // window.removeEventListener('load', )
  },
  activated: function() {
    
  },
  updated: function() {

  }

}
</script>

<style lang="stylus" scoped>
  div {
    box-sizing: border-box;
  }

  .list {
    // 用相对定位然后不设置top呢 => 会造成ovh设置了, 但是整个有scroll滚动条的, 
    // 我们想要的效果是没有scroll, 如果用relative,那么是list里面的元素超过才会"消失", 我们想根据这个屏幕设置, 所以用absolute
    // 为什么不能用relativve,然后设置一个高度? 因为你不知道高度是多少,就算知道了,但是不同尺寸的屏幕自适应怎么办?
    // 是不是用height: 100%就行了?  不行, 因为height:100%会找父级元素, 而父级元素高度又根据子元素来撑开,所以算来算去, 高度100%, 最终还是自己的实际高度
    // 综上所述, 还是用posa, t.88r, l0, r0,b0,   => r0可以换成w100p, 不过既然要用tlrb,那么就贯彻到底
    position: absolute;
    top: .88rem;
    left: 0;
    // 如果宽度不设置, 那么可以left和right都设置, r0+l0, 相当于宽度是100%了, 把定位"拉伸"了
    right: 0;
    bottom: 0;
    // width: 100%;
    // height: 100%;
    // 如果bottom不设置为0, 那么ovh其实也不会生效的
    overflow: hidden;
    // 设置好后, 用better-scorll
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;  
  }

  .border::before,
  .border-top::before,
  .border-right::before,
  .border-bottom::before,
  .border-left::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::before,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-topright::after,
  .border-bottomleft::before,
  .border-bottomleft::after {
    border-color: red;
  }
  
  .hot-cities {
    width: 100%;
    // 其实高度不用加, 会自适应的, 宽度也是默认100%的
    // height: 4.32rem;

    .hot-cities-title {
      height: .72rem;
      padding: 0 .2rem;
      background-color: #ddd;
      line-height: .72rem;
    }

    ul li {
      float: left;
      width: 33.33%;
      height: .9rem;
      line-height: .9rem;
      text-align: center;
    }
  }

  .alphabet-menu {
    width: 100%;
    
    // height: 5.22rem;

    .alphabet-menu-title {
      height: .72rem;
      padding: 0 .2rem;
      background-color: #ddd;
      line-height: .72rem;
    }

    ul li {
      float: left;
      width: 16.66%;
      height: .9rem;
      line-height: .9rem;
      text-align: center;
    }
  }
  .alphabet-list {
    width: 100%;
    // 这里的高度就不算了, 太多了, 让它自适应,
    .alphabet-list-title {
      height: .72rem;
      padding: 0 .2rem;
      background-color: #ddd;
      line-height: .72rem;
    }

    ul li {
      float: left;
      width: 25%;
      height: .9rem;
      line-height: .9rem;
      text-align: center;
    }
  }
</style>